<template>
  <el-dropdown :hide-on-click="false" size="small" style="margin-left: 12px" trigger="click">
    <div class="yc-button">
      <span class="iconfont icon-lieguanli"></span>
      列操作
    </div>
    <template #dropdown>
      <div class="listwrap">
        <div class="title">左冻结</div>
        <draggable :list="leftlist" item-key="title" class="list-group" ghost-class="ghost"
          @change="confirmFilterEvent">
          <template #item="{ element }">
            <div class="list-group-item">
              {{ element.title }}

              <div class="icon-group" @click.stop>
                <i class="iconfont icon-zuodongjie active" title="左解冻" @click="columnAction('left', element.field)"></i>
                <i class="iconfont icon-youdongjie" title="右冻结" @click="columnAction('right', element.field)"></i>
                <div class="divied"></div>
                <i class="iconfont icon-yincang1" title="隐藏" @click="columnAction('visibleToggle', element.field)"></i>
              </div>
            </div>
          </template>
        </draggable>
        <div class="line"></div>
        <div class="title">显示</div>
        <draggable :list="showlist" item-key="title" class="list-group" ghost-class="ghost"
          @change="confirmFilterEvent">
          <template #item="{ element }">
            <div class="list-group-item">
              {{ element.title }}

              <div class="icon-group" @click.stop>
                <i class="iconfont icon-youdongjie" title="左冻结" @click="columnAction('left', element.field)"></i>
                <i class="iconfont icon-youdongjie" title="右冻结" @click="columnAction('right', element.field)"></i>
                <div class="divied"></div>
                <i class="iconfont icon-yincang1" title="隐藏" @click="columnAction('visibleToggle', element.field)"></i>
              </div>
            </div>
          </template>
        </draggable>
        <div class="line"></div>
        <div class="title">右冻结</div>
        <draggable :list="rightlist" item-key="title" class="list-group" ghost-class="ghost"
          @change="confirmFilterEvent">
          <template #item="{ element }">
            <div class="list-group-item">
              {{ element.title }}

              <div class="icon-group" @click.stop>
                <i class="iconfont icon-zuodongjie" title="左冻结" @click="columnAction('left', element.field)"></i>
                <i class="iconfont icon-youdongjie active" title="右解结"
                  @click="columnAction('right', element.field)"></i>
                <div class="divied"></div>
                <i class="iconfont icon-yincang1" title="隐藏" @click="columnAction('visibleToggle', element.field)"></i>
              </div>
            </div>
          </template>
        </draggable>
        <div class="line"></div>
        <div class="title">隐藏</div>
        <draggable :list="hidelist" item-key="title" class="list-group" ghost-class="ghost"
          @change="confirmFilterEvent">
          <template #item="{ element }">
            <div class="list-group-item">
              {{ element.title }}

              <div class="icon-group" @click.stop>
                <i class="iconfont icon-youdongjie" title="左冻结" @click="columnAction('left', element.field)"></i>
                <i class="iconfont icon-youdongjie" title="右冻结" @click="columnAction('right', element.field)"></i>
                <div class="divied"></div>
                <i class="iconfont icon-yincang1 active" title="显示"
                  @click="columnAction('visibleToggle', element.field)"></i>
              </div>
            </div>
          </template>
        </draggable>
      </div>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable';
import { columnsData } from '../conifg';
import { cloneDeep } from 'lodash';
const props = defineProps<{ columns: any[] }>();
const emit = defineEmits(['columsChange']);
const leftlist = ref<{ title: string; id: number; field: string }[]>([]);
const showlist = ref<{ title: string; id: number; field: string }[]>([]);
const rightlist = ref<{ title: string; id: number; field: string }[]>([]);
const hidelist = ref<{ title: string; id: number; field: string }[]>([]);
const dataMap = new Map();
let cloenData: any[] = [];
const initData = () => {
  cloenData = cloneDeep(props.columns);
  console.log('columns', props.columns)
  initList();
};

const initList = () => {
  leftlist.value = [];
  hidelist.value = [];
  rightlist.value = [];
  showlist.value = [];
  for (let i = 0; i < cloenData.length; i++) {
    if (!cloenData[i].title || ['操作', '序号'].includes(cloenData[i].title)) {
      continue;
    }
    if (cloenData[i].hide) {
      hidelist.value.push({ title: cloenData[i].title, id: i, field: cloenData[i].field });
    } else if (cloenData[i].fixed === 'left') {
      leftlist.value.push({ title: cloenData[i].title, id: i, field: cloenData[i].field });
    } else if (cloenData[i].fixed === 'right') {
      rightlist.value.push({ title: cloenData[i].title, id: i, field: cloenData[i].field });
    } else {
      showlist.value.push({ title: cloenData[i].title, id: i, field: cloenData[i].field });
    }
  }
};

onMounted(() => {
  initData();
});

const columnAction = (action: string, field: string) => {
  const index = cloenData.findIndex(item => item.field === field);
  leftlist.value = leftlist.value.filter(item => item.field !== field);
  rightlist.value = rightlist.value.filter(item => item.field !== field);
  showlist.value = showlist.value.filter(item => item.field !== field);
  hidelist.value = hidelist.value.filter(item => item.field !== field);
  switch (action) {
    case 'visibleToggle': // 显隐
      cloenData[index].hide = !cloenData[index].hide;
      cloenData[index].fixed = '';
      if (!cloenData[index].hide) {
        showlist.value.push(cloenData[index]);
      } else {
        hidelist.value.push(cloenData[index]);
      }
      break;
    case 'left': // 列左冻结 左解冻
      cloenData[index].hide = false;
      if (cloenData[index].fixed === 'left') {
        cloenData[index].fixed = '';
        showlist.value.push(cloenData[index]);
      } else {
        cloenData[index].fixed = 'left';
        leftlist.value.push(cloenData[index]);
      }
      break;
    case 'right': // 列右冻结 右解冻
      cloenData[index].hide = false;
      if (cloenData[index].fixed === 'right') {
        cloenData[index].fixed = '';
        showlist.value.push(cloenData[index]);
      } else {
        cloenData[index].fixed = 'right';
        rightlist.value.unshift(cloenData[index]);
      }
      break;
  }
  confirmFilterEvent();
};

// 确认排序
const confirmFilterEvent = () => {

  dataMap.clear();
  for (let i = 0; i < cloenData.length; i++) {
    dataMap.set(cloenData[i].title, cloenData[i]);
  }
  let newColumns: any[] = [
    columnsData[0],
    columnsData[1],
    ...leftlist.value.map(item => dataMap.get(item.title)),
    ...showlist.value.map(item => dataMap.get(item.title)),
    ...rightlist.value.map(item => dataMap.get(item.title)),
    ...hidelist.value.map(item => dataMap.get(item.title)),
    columnsData[columnsData.length - 1],
  ];
  // console.log(newColumns);
  emit('columsChange', newColumns);
};

// watch(
//   () => [leftlist.value, rightlist.value, showlist.value, hidelist.value],
//   () => {
//     confirmFilterEvent();
//   }
// );
// watch(
//   () => props.columns,
//   value => {
//     console.log(value);
//     // initData();
//   },
//   {
//     deep: true,
//   }
// );
</script>

<style lang="less" scoped>
.yc-button {
  width: 84px;
  height: 28px;
  text-align: center;
  line-height: 26px;
  border-radius: 4px;
  opacity: 1;
  font-family: 思源黑体;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0em;

  color: #333333;

  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  cursor: pointer;

  span {
    margin-right: 4px;
  }

  &:focus-within,
  &:hover {
    color: var(--vxe-primary-color);
    border-color: var(--vxe-primary-color);
  }
}

.title {
  position: relative;
  margin-left: 12px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  letter-spacing: 0em;

  color: #333333;
  margin-bottom: 6px;
  margin-top: 8px;

  &::after {
    content: '';
    width: 4px;
    height: 12px;
    background-color: #31969a;
    position: absolute;
    top: 5px;
    left: -8px;
  }
}

.line {
  height: 1px;
  margin: 8px 0px 4px;
  background-color: #d9d9d9;
}

.listwrap {
  // padding: 10px 0px;
  margin: 4px;
  background-color: #fff;
  max-height: 300px;
  overflow: auto;

  .list-group {

    // padding: 0px 15px;
    .list-group-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 204px;
      position: none;
      padding-left: 10px;
      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: 28px;
      letter-spacing: 0em;
      cursor: move;
      color: #666666;

      &:hover {
        background-color: rgba(0, 0, 0, 0.06);
      }

      .vxe-icon-menu {
        font-size: 14px;
        cursor: pointer;
        pointer-events: all;
      }

      .icon-group {
        display: flex;
        align-items: center;

        :deep(i) {
          color: #c7c7c7;
          font-size: 16px;
          cursor: pointer;
          pointer-events: all;
          margin-right: 10px;
        }
      }

      .divied {
        width: 8px;
        height: 1px;
        transform: rotate(90deg);

        background: rgba(217, 217, 217, 1);
        // background-color:red;
        margin-right: 8px;
      }
    }
  }
}

.my-fc-footer {
  text-align: right;
  padding-top: 10px;
}

.my-fc-footer button {
  padding: 0 15px;
  margin-left: 15px;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.active {
  color: #31969a !important;
}
</style>
